<template>
  <div>
    <h3 style="text-align: center">告警信息概述</h3>
    <div id="WarningTypeChart" style="width:100%;height:300px;"></div>
  </div>
</template>

<script>
import FlowChartDataHandle from "../../DataHandle/FlowChartDataHandle";
export default {
  name: 'WarningTypeChart',
  data() {
    return {
      myChart: null,
      WarningTypeChartData:null
    }
  },
  props: {
    datelist: {
      type: Array
    }
  },
  watch: {
    datelist() {
      // this.getSpecifiedDateData()
    },
    WarningTypeChartData() {
      this.chartInit()
    }
  },
  created() {
    this.$Pubsub.subscribe("WarningTypeChartData", (msgName,msg)=>{
      this.WarningTypeChartData = msg
    })
  },
  mounted() {
  },
  methods: {
    chartInit() {
      // if (this.myChart !== null) {
      //   this.myChart.dispose()
      // }
      this.myChart = this.$echarts.init(
        document.getElementById('WarningTypeChart')
      )
      this.myChart.setOption({
        angleAxis: {
          type: 'category',
          data: this.WarningTypeChartData[2],
          z: 10
        },
        radiusAxis: {},
        polar: {
          radius :"59%",
          center:['50%','60%']
        },
        series: this.WarningTypeChartData[0],
        legend: {
          show: true,
          data: this.WarningTypeChartData[1],
          top:'0%'
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
